@import 'src/style/modules';

/*
  Resource Lists
  ------------------------------------------------------------------------------
  Hence the name these are used to display lists of resources and starndardize
  the appearance and UX of managing resources
*/

.resource-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/*
  Header & Sorting
  ------------------------------------------------------------------------------
*/

.resource-list--header {
  display: flex;
  align-items: center;
  padding-bottom: $ix-marg-c;
  justify-content: space-between;
}

.resource-list--sorting {
  display: flex;
  align-items: center;
}

.resource-list--filter {
  min-width: 10px;
}

.resource-list--sorter {
  user-select: none;
  font-size: $form-md-font;
  font-weight: 600;
  text-transform: uppercase;
  color: $g11-sidewalk;
  transition: color 0.25s ease;
  margin-left: $ix-marg-c;
  display: flex;
  align-items: center;
  align-content: center;

  &:hover {
    color: $g18-cloud;
    cursor: pointer;
  }

  &.resource-list--sort-descending,
  &.resource-list--sort-ascending {
    color: $c-pool;
  }
}

.resource-list--sort-arrow {
  width: $ix-marg-c;
  height: $ix-marg-c;
  position: relative;
  margin-left: $ix-marg-a;
  transition: opacity 0.25s ease;
  opacity: 0;

  .resource-list--sort-descending &,
  .resource-list--sort-ascending & {
    opacity: 1;
  }

  > span.icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.25s ease;
  }

  .resource-list--sort-descending & > span.icon {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  .resource-list--sort-ascending & > span.icon {
    transform: translate(-50%, -50%) rotate(180deg);
  }
}

/*
  Cards
  ------------------------------------------------------------------------------
*/

.resource-list--card,
.resource-list--card-contents {
  display: flex;
  flex-direction: column;

  > * {
    margin-bottom: $ix-border;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.resource-list--card {
  position: relative;
  color: $g13-mist;
  background-color: $g3-castle;
  border-radius: $radius;
  padding: $ix-marg-b $ix-marg-c;
  margin-bottom: $ix-border;
  transition: background-color 0.25s ease, color 0.25s ease;

  &:hover {
    color: $g16-pearl;
    background-color: $g4-onyx;
  }

  &.resource-list--card__toggleable {
    flex-direction: row;
    align-items: stretch;
  }
}

.resource-list--card-contents {
  flex: 1 0 0;
}

.resource-list--toggle {
  padding-right: $ix-marg-c;
}

.resource-list--meta {
  display: inline-flex;
  font-size: $form-xs-font;
  font-weight: 600;
  color: $g11-sidewalk;
}

.resource-list--meta-item {
  transition: border-color 0.25s ease, color 0.25s ease;
  border-right: $ix-border solid $g5-pepper;
  padding-right: $ix-marg-b;
  margin-right: $ix-marg-b;

  &:last-child {
    border-right: 0;
    padding-right: 0;
    margin-right: 0;
  }

  .resource-list--card:hover & {
    color: $g15-platinum;
    border-color: $g7-graphite;
  }
}

.resource-list--card a.resource-list--owner {
  color: $g11-sidewalk !important;
}

.resource-list--card:hover a.resource-list--owner {
  color: $g15-platinum !important;
}

.resource-list--card:hover a.resource-list--owner:hover {
  color: $c-laser !important;
}

.resource-list--context-menu {
  opacity: 0;
  transition: opacity 0.25s ease;
  position: absolute;
  top: $ix-marg-b;
  right: $ix-marg-b;

  .resource-list--card:hover & {
    opacity: 1;
  }
}

.resource-list--name-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: nowrap;

  > *:first-child {
    margin-bottom: $ix-marg-a;
  }
}

@media screen and (min-width: 767px) {
  .resource-list--name-meta {
    flex-direction: row;
    align-items: center;

    > *:first-child {
      margin-bottom: 0;
    }
  }
}

/*
  Disabled Card
  ------------------------------------------------------------------------------
*/

.resource-list--card.resource-list--card__disabled {
  background-color: rgba($g3-castle, 0.5);
  color: $g9-mountain;
  font-style: italic;

  .resource-list--meta {
    color: $g9-mountain;
  }

  &:hover .resource-list--meta {
    color: $g12-forge;
  }
}

/*
  Depth Styling
  ------------------------------------------------------------------------------
*/

.panel .resource-list--card,
.tabs .resource-list--card {
  background-color: $g4-onyx;

  &:hover {
    background-color: $g5-pepper;
  }
}

.panel .resource-list--card.resource-list--card__disabled,
.tabs .resource-list--card.resource-list--card__disabled {
  background-color: rgba($g4-onyx, 0.5);
}
